<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<html>
<head>
    <title>管理员查询</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/layui.css" />
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/common.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/slide.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/flat-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jquery.nouislider.css">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/layui.js" media="all" ></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
     $(function () {


            $.ajax({
                type:"get",
                url:"${pageContext.request.contextPath }/admin/mvList",
                data:{
                    pageNum:1
                },
                dataType:"json",
                success:function(data){
                    console.log(data);
                    var tr="";
                    $.each(data,function(index,info){
                        tr+="<tr><td>"+info.mvId+"</td><td>"+info.mvName+"</td>"+"<td style='display: none'>"+info.singerId+"</td>"+
                            "<td>"+info.siName+"</td>"+"<td style='display: none'>"+info.mvTypeId+"</td>"+"<td>"+info.mvTypeName+"</td>"+
                            "<td><button id='updateMVs' class='btn btn-success btn-xs' data-toggle='modal' data-target='#updateMv' value='"+info.mvId+"'>修改</button>"+
                            "<button  class='btn btn-danger btn-xs ' data-toggle='modal' value='"+info.mvId+" ' id='delMV'>删除</button></td></tr>";
                    });

                    $("#table-lists").html(tr);


                }
            });
// 关键字搜索
         $("#search").click(function () {
             $.ajax({
                 type: "get",
                 url: "${pageContext.request.contextPath}/admin/adminByMv",
                 dataType: "json",
                 data: {
                     keyword: $("#keyword").val()
                 },
                 success: function (data) {
                     if (data != "") {
                         var tr = "";
                         $.each(data, function (index, info) {
                             tr+="<tr><td>"+info.mvId+"</td><td>"+info.mvName+"</td>"+"<td style='display: none'>"+info.singerId+"</td>"+
                                 "<td>"+info.siName+"</td>"+"<td style='display: none'>"+info.mvTypeId+"</td>"+"<td>"+info.mvTypeName+"</td>"+
                                 "<td><button id='updateMVs' class='btn btn-success btn-xs' data-toggle='modal' data-target='#updateMv' value='"+info.mvId+"'>修改</button>"+
                                 "<button  class='btn btn-danger btn-xs ' data-toggle='modal' value='"+info.mvId+" ' id='delMV'>删除</button></td></tr>";
                         });
                         $("#table-lists").html(tr);
                     }else {
                         alert("没有该电影类别");
                     }

                 }

             })

         });
            //删除
            $("#table-lists").on("click", "#delMV", function() {
                console.log($(this).val())
                $.ajax({
                    type:"get",
                    url:"${pageContext.request.contextPath }/admin/mvDel",
                    data:{
                        mvId:$(this).val(),
                    },
                    dataType:"json",
                    success:function(data){
                        if (data==1){
                            alert("删除成功")
                        }else {
                            alert("删除失败")
                        }
                        location.href="${pageContext.request.contextPath }/admin/lastMV";
                    }
                });
            });

            $("#table-lists").on("click", "#updateMVs", function() {
                $("#mvId").val($(this).closest("tr").find("td").eq(0).text())
                $("#mvName").val($(this).closest("tr").find("td").eq(1).text())
                $("#singerId").val($(this).closest("tr").find("td").eq(2).text())
                $("#mvTypeId").val($(this).closest("tr").find("td").eq(4).text())

                });


            $("#doMV").click(function () {
                console.log($("#mvId").val());
                $.ajax({
                    type:"get",
                    url:"${pageContext.request.contextPath }/admin/doMVUpdate",
                    data:{
                        mvId:$("#mvId").val(),
                        mvName:$("#mvName").val(),
                        siId:$("#siId").val(),
                        mvType:$("#mvType").val()


                    },
                    contentType:"application/json;charset=utf-8",//可有可无
                    dataType:"json",
                    success:function(data){
                        if (data!=null){
                            alert("修改成功");
                            window.location.href = "${pageContext.request.contextPath }/admin/lastMV";
                        }
                    }
                });
            });
            $("#adMV").click(function(){
                $.ajax({
                    type:"get",
                    url:"${pageContext.request.contextPath }/admin/addMVs",
                    dataType:"text",
                    data:{
                        mvId:$("#mvIds").val(),
                        mvName:$("#mvNames").val(),
                        siId:$("#siIds").val(),
                        mvType:$("#mvTypes").val()
                    },
                    success:function(data){
                        if (data==1) {
                            alert("添加成功");
                            location.href="${pageContext.request.contextPath }/admin/lastMV";
                        }
                    }, error:function(){
                        alert("系统崩溃！");
                    }
                });
            })


     })
    </script>
</head>
<body>
<div role="tabpanel" class="tab-pane" id="regu" style="">
    <div class="check-div form-inline">
        <div class="col-xs-3">
            <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#myModalAddMV">添加MV </button>
        </div>
        <div class="col-lg-4 col-xs-5">
            <input type="text" class=" form-control input-sm " placeholder="输入文字搜索" id="keyword">
            <button class="btn btn-white btn-xs " id="search">查 询 </button>
        </div>

    </div>
    <table class="table text-center" id="tab">
        <thead>
        <tr>
            <th>MVID</th>
            <th>MV名称</th>
            <th>歌手</th>
            <th>MV类型</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody id="table-lists">

        </tbody>

        <tbody>
        <tr class="text-center">
            <td colspan="12">
                <button data-target="#myModalAddMV" data-toggle="modal">添加</button>

            </td>
        </tr>
        </tbody>

    </table>
</div>

<!-- 修改模态框（Modal） -->
<div class="modal fade" id="updateMv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    修改用户
                </h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="mvId"/>
                歌名：<input type="text" id="mvName" /><br/>
                歌手： <select id="siId">
                <option value="1">李宇春</option>
                <option value="2">周笔畅</option>
                <option value="3">鹿晗</option>
                <option value="4">张艺兴</option>
                <option value="5">林俊杰</option>
                <option value="6">
                    允儿 (윤아)</option>
            </select><br/>
                MV类型：<select id="mvType">
                <option value="1">电影曲</option>
                <option value="2">激情</option>
                <option value="3">爱情</option>
                <option value="4">电视剧曲</option>
            </select>
                <br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="doMV">提交更改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->


</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModalAddMV" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabels">
                    添加用户
                </h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="mvIds"/>
                歌名：<input type="text" id="mvNames" /><br/>
                歌手：<select id="siIds">
                <option value="1">李宇春</option>
                <option value="2">周笔畅</option>
                <option value="3">鹿晗</option>
                <option value="4">张艺兴</option>
                <option value="5">林俊杰</option>
                <option value="6">
                    允儿 (윤아)</option>
            </select>
                MV类型：<select id="mvTypes">
                <option value="1">电影曲</option>
                <option value="2">激情</option>
                <option value="3">爱情</option>
                <option value="4">电视剧曲</option>
            </select>
                <br/>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="adMV">提交更改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->


</div>
<p style="text-align: center" id="p-button">
    <button class="btn btn-info" id="prev">上一页</button>
    <button class="btn btn-info" id="bt" value="1">第1页</button>
    <button class="btn btn-info" id="bt" value="2">第2页</button>
    <button class="btn btn-info" id="bt" value="3">第3页</button>
    <button class="btn btn-info" id="next">下一页</button>
</p>
<input type="hidden" id="nowPage"/>
</body>
</html>
